<template>
  <div id="app">
    <input v-model="keyword" />
    <transition-group
      tag="url"
      name="why"
      :css="false"
      @enter="enter"
      @leave="leave"
      @before-enter="beforeEnter"
    >
      <li v-for="(item, index) in showNames" :key="item" :data-index="index">
        {{ item }}
      </li>
    </transition-group>
  </div>
</template>

<script>
import gsap from "gsap";
export default {
  name: "App",
  data() {
    return {
      names: ["abc", "cba", "nba", "why", "zjf", "zrj", "yk"],
      keyword: "",
    };
  },
  computed: {
    showNames() {
      return this.names.filter((item) => item.indexOf(this.keyword) !== -1);
    },
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.height = 0;
    },
    enter(el, done) {
      gsap.to(el, {
        opacity: 1,
        height: "1.5em",
        onComplete: done,
        delay: el.dataset.index * 0.05,
      });
    },
    leave(el, done) {
      gsap.to(el, {
        opacity: 0,
        height: 0,
        onComplete: done,
        delay: el.dataset.index * 0.05,
      });
    },
  },
};
</script>

<style lang="less">
.why-enter-from,
 .why-leave-to {
   opacity: 0;
 }
 .why-enter-active,
 .why-leave-active {
   transition: opacity 1s ease;
 }
</style>
